import React, { useState, useEffect } from 'react';
import { show_mt, cline, uDb, ErrView, Wait, obj_str, BaseDlg, NuiBt } from 'sui';
import { g_db } from 'db/state';
import { loc } from 'local';
import { Scan, Pcode} from '../sort/ctl/ctl';

const DlgTech = ({ open, setOpen }) => {
    const [value, SetValue] = useState();
    const [fin, setFin] = useState("scan");
    const [err, setErr] = useState("");
    const [wait, setWait] = useState(false);

    useEffect(() => {
        if (!open) {
            return;
        }

        setErr("");

        g_db.stop_scan();
    }, [open]);

    const hfind = (msn) => {
        if (!msn) {
            return;
        }

        const herr = (e) => {
            setErr(e);
            setWait(false);
        };

        setWait(true);

        uDb(null, `file/get/box_${msn}`,
            {
                line: cline(),
                sn: "attr",
            },
            r => {
                const task = obj_str(r, "task");
                if (!task) {
                    return herr("箱子没有绑定工单");
                }

                uDb(null, "task/get",
                    {
                        line: cline(),
                        k: task,
                    },
                    r => {
                        SetValue(r);
                        setWait(false);
                    }, e => herr("没有得到工单信息"));
            },
            e => herr("没有箱子信息"));
    };

    const getView = () => {
        if (fin === "scan") {
            return <Scan hcmd={hfind} open={open} setOpen={setOpen}/>;
        }

        return <Pcode hcmd={hfind} open={open} setOpen={setOpen}/>;
    };

    const getResult = () => {
        if (err) {
            return <ErrView err={err}/>;
        }

        if (!value) {
            return;
        }

        const getCage = () => {
            const ball = obj_str(value.ballch, "ball");
            let tech = obj_str(value, "tech");
            tech = tech.split("-");

            return <>{tech[0]}<span className="ml-4">{ball}</span></>;
        };

        const getRow = (k, v) => (
            <div className="table-row">
                <div className="text-right table-cell">{k}</div>
                <div className="pl-6 table-cell">{v}</div>
            </div>
        );

        return (
            <div className="text-xl mb-4">
                <div className="my-2 table mx-4">
                    {getRow("工单号", obj_str(value, "sn"))}
                    {getRow("型号", obj_str(value, "tech"))}
                </div>
                <div className="bg-green-200">
                    <div className="my-2 table mx-4 py-2">
                        {getRow("材料", show_mt(obj_str(value.ballch, "mt")))}
                        {getRow("球径", obj_str(value.ballch, "ball"))}
                        {getRow("规值", obj_str(value.ballch, "std"))}
                        {getRow("分规值", obj_str(value.ballch, "sub"))}
                    </div>
                </div>
                <div className="bg-blue-200">
                    <div className="my-2 table mx-4 py-2">
                        {getRow("保持架", getCage())}
                        {getRow("保持架批次", obj_str(value, "cage"))}
                    </div>
                </div>
            </div>
        );
    };

    return (
        <BaseDlg open={open} title="合套参数">
            <div className="flex flex-col">
                {getResult()}
                <ErrView err="扫描箱子二维码" tp="info"/>
                <div className="flex flex-row ml-4">
                    <NuiBt color={fin === "scan" ? "green": "blue"} hcmd={() => setFin("scan")}>{loc("base_62")}</NuiBt>
                    <NuiBt className="ml-4" color={fin === "scan" ? "blue": "green"} hcmd={() => setFin("pass")}>{loc("base_59")}</NuiBt>
                </div>
                {getView()}
                <Wait wait={wait}/>
            </div>
        </BaseDlg>
    );
};

export {DlgTech};
